<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link type="text/css" rel="stylesheet" href="css/style.css" />
		<style type="text/css">
			#addTheAddress2 {
				display: none;
			}

			.checkedBox {
				background-color: #EAEAEA;
				color: lightblue;
			}

			.remove {
				margin-left: 10px;
				background: white;
			}

			.update {
				margin-left: 10px;
				background: white;
			}

			.setDefault {
				margin-left: 10px;
				background: white;
			}
			.defalt{
				margin-left: 10px;
			}
		</style>
		<title>地址管理</title>
	</head>
	<body>
		<!--Begin Header Begin-->
		<div class="soubg">
			<div class="sou">
				<span class="fr"> <span class="fl" id="username">章敏</span><span><a href="Login.html">登录</a>&nbsp; <a href="Regist.html"
						 style="color: #ff4e00;">免费注册</a>&nbsp;|&nbsp;<a href="#">我的订单</a>&nbsp;|
					</span> <span class="ss">
						<div class="ss_list">
							<a href="#">收藏夹</a>
							<div class="ss_list_bg">
								<div class="s_city_t"></div>
								<div class="ss_list_c">
									<ul>
										<li><a href="#">我的收藏夹</a></li>
										<li><a href="#">我的收藏夹</a></li>
									</ul>
								</div>
							</div>
						</div>
						<div class="ss_list">
							<a href="#">客户服务</a>
							<div class="ss_list_bg">
								<div class="s_city_t"></div>
								<div class="ss_list_c">
									<ul>
										<li><a href="#">客户服务</a></li>
										<li><a href="#">客户服务</a></li>
										<li><a href="#">客户服务</a></li>
									</ul>
								</div>
							</div>
						</div>
						<div class="ss_list">
							<a href="#">网站导航</a>
							<div class="ss_list_bg">
								<div class="s_city_t"></div>
								<div class="ss_list_c">
									<ul>
										<li><a href="#">网站导航</a></li>
										<li><a href="#">网站导航</a></li>
									</ul>
								</div>
							</div>
						</div>
					</span> <span class="fl">|&nbsp;关注我们：</span> <span class="s_sh"><a href="#" class="sh1">新浪</a><a href="#" class="sh2">微信</a></span>
					<span class="fr">|&nbsp;<a href="#">手机版&nbsp;<img src="images/s_tel.png" align="absmiddle" /></a></span>
				</span>
			</div>
		</div>
		<div class="m_top_bg">
			<div class="top">
				<div class="m_logo">
					<a href="Index.html"><img src="images/logo1.png" /></a>
				</div>
				<div class="m_search">
					<form>
						<input type="text" value="" class="m_ipt" /> <input type="submit" value="搜索" class="m_btn" />
					</form>
					<span class="fl"><a href="#">咖啡</a><a href="#">iphone 6S</a><a href="#">新鲜美食</a><a href="#">蛋糕</a><a href="#">日用品</a><a
						 href="#">连衣裙</a></span>
				</div>
			</div>
		</div>
		<!--End Header End-->
		<div class="i_bg bg_color">
			<!--Begin 用户中心 Begin -->
			<div class="m_content">
				<div class="m_left">
					<div class="left_n">管理中心</div>
					<div class="left_m">
						<div class="left_m_t t_bg1">订单中心</div>
						<ul>
							<li><a href="Member_Order.html">我的订单</a></li>
							<li><a href="Member_Address.html" class="now">收货地址</a></li>
							<li><a href="#">缺货登记</a></li>
							<li><a href="#">跟踪订单</a></li>
						</ul>
					</div>
					<div class="left_m">
						<div class="left_m_t t_bg2">会员中心</div>
						<ul>
							<li><a href="Member_User.html">用户信息</a></li>
							<li><a href="Member_Collect.html">我的收藏</a></li>
							<li><a href="Member_Msg.html">我的留言</a></li>
							<li><a href="Member_Links.html">推广链接</a></li>
							<li><a href="#">我的评论</a></li>
						</ul>
					</div>
					<div class="left_m">
						<div class="left_m_t t_bg3">账户中心</div>
						<ul>
							<li><a href="Member_Safe.html">账户安全</a></li>
							<li><a href="Member_Packet.html">我的红包</a></li>
							<li><a href="Member_Money.html">资金管理</a></li>
						</ul>
					</div>
					<div class="left_m">
						<div class="left_m_t t_bg4">分销中心</div>
						<ul>
							<li><a href="Member_Member.html">我的会员</a></li>
							<li><a href="Member_Results.html">我的业绩</a></li>
							<li><a href="Member_Commission.html">我的佣金</a></li>
							<li><a href="Member_Cash.html">申请提现</a></li>
						</ul>
					</div>
				</div>
				<div class="m_right">
					<p></p>
					<div class="mem_tit">收货地址</div>
					<div class="address">
						<table border="0" class="add_t" align="center" style="width: 98%; margin: 10px auto;" cellspacing="0" cellpadding="0"
						 id="addresstable">
							<tr>
								<td align="center">收货人</td>
								<td align="center">性别</td>
								<td align="center">电话</td>
								<td align="center">邮编</td>
								<td align="center">收货地址</td>
								<td align="center">备注</td>
								<td align="center">编辑</td>
							</tr>
						</table>

					</div>

					<div class="mem_tit">
						<a href="#" onclick="showAddTheAddress();"><img src="images/add_ad.gif" /></a>
					</div>
					<div id="addTheAddress2">
						<table border="0" class="add_tab" style="width: 930px;" cellspacing="0" cellpadding="0">
							<tr>
								<td width="135" align="right">所在地址</td>
								<td colspan="3" style="font-family: '宋体';"><span style="font-size: 16px;">
										送货至:</span> 省份： <select name="province" id="province" class=" default">
									</select> 城市： <select name="city" id="city" class=" default">
									</select> 区县： <select name="county" id="county" class=" default">
									</select> （必填）<input type="button" id="" value="x" style="float: right;" onclick="giveUpEdit();" /></td>
							</tr>
							<tr>
								<td align="right">收货人姓名</td>
								<td><input type="text" class="add_ipt" name="consignee" id="consignee" />（必填）</td>
								<td align="right">邮编</td>
								<td><input type="text" class="add_ipt" name="zip_code" id="zip_code" /></td>
							</tr>
							<tr>
								<td align="right">详细地址</td>
								<td><input type="text" class="add_ipt" name="address" id="address" />（必填）</td>
								<td align="right">性别</td>
								<td><input type="text" class="add_ipt" name="sex" id="sex" />（必填）</td>
							</tr>
							<tr>
								<td align="right">手机</td>
								<td><input type="text" class="add_ipt" name="phone" id="phone" />（必填）</td>
								<td align="right">备注</td>
								<td><input type="text" class="add_ipt" name="remark" id="remark" /></td>
							</tr>
						</table>
						<p align="right">
							<input type="hidden" /> <a class="add_b" onclick="changeTheAddress();" id="change">确认修改</a>
							<a class="add_b" onclick="hidAddTheAddress();" id="save">保存</a>
							<!-- 	  <input type="button" onclick="regsiter()" value="register"> -->
					</div>
				</div>
			</div>
			<!--End 用户中心 End-->
			<!--Begin Footer Begin -->
			<div class="b_btm_bg b_btm_c">
				<div class="b_btm">
					<table border="0" style="width: 210px; height: 62px; float: left; margin-left: 75px; margin-top: 30px;"
					 cellspacing="0" cellpadding="0">
						<tr>
							<td width="72"><img src="images/b1.png" width="62" height="62" /></td>
							<td>
								<h2>正品保障</h2>正品行货 放心购买
							</td>
						</tr>
					</table>
					<table border="0" style="width: 210px; height: 62px; float: left; margin-left: 75px; margin-top: 30px;"
					 cellspacing="0" cellpadding="0">
						<tr>
							<td width="72"><img src="images/b2.png" width="62" height="62" /></td>
							<td>
								<h2>满38包邮</h2>满38包邮 免运费
							</td>
						</tr>
					</table>
					<table border="0" style="width: 210px; height: 62px; float: left; margin-left: 75px; margin-top: 30px;"
					 cellspacing="0" cellpadding="0">
						<tr>
							<td width="72"><img src="images/b3.png" width="62" height="62" /></td>
							<td>
								<h2>天天低价</h2>天天低价 畅选无忧
							</td>
						</tr>
					</table>
					<table border="0" style="width: 210px; height: 62px; float: left; margin-left: 75px; margin-top: 30px;"
					 cellspacing="0" cellpadding="0">
						<tr>
							<td width="72"><img src="images/b4.png" width="62" height="62" /></td>
							<td>
								<h2>准时送达</h2>收货时间由你做主
							</td>
						</tr>
					</table>
				</div>
			</div>
			<div class="b_nav">
				<dl>
					<dt>
						<a href="#">新手上路</a>
					</dt>
					<dd>
						<a href="#">售后流程</a>
					</dd>
					<dd>
						<a href="#">购物流程</a>
					</dd>
					<dd>
						<a href="#">订购方式</a>
					</dd>
					<dd>
						<a href="#">隐私声明</a>
					</dd>
					<dd>
						<a href="#">推荐分享说明</a>
					</dd>
				</dl>
				<dl>
					<dt>
						<a href="#">配送与支付</a>
					</dt>
					<dd>
						<a href="#">货到付款区域</a>
					</dd>
					<dd>
						<a href="#">配送支付查询</a>
					</dd>
					<dd>
						<a href="#">支付方式说明</a>
					</dd>
				</dl>
				<dl>
					<dt>
						<a href="#">会员中心</a>
					</dt>
					<dd>
						<a href="#">资金管理</a>
					</dd>
					<dd>
						<a href="#">我的收藏</a>
					</dd>
					<dd>
						<a href="#">我的订单</a>
					</dd>
				</dl>
				<dl>
					<dt>
						<a href="#">服务保证</a>
					</dt>
					<dd>
						<a href="#">退换货原则</a>
					</dd>
					<dd>
						<a href="#">售后服务保证</a>
					</dd>
					<dd>
						<a href="#">产品质量保证</a>
					</dd>
				</dl>
				<dl>
					<dt>
						<a href="#">联系我们</a>
					</dt>
					<dd>
						<a href="#">网站故障报告</a>
					</dd>
					<dd>
						<a href="#">购物咨询</a>
					</dd>
					<dd>
						<a href="#">投诉与建议</a>
					</dd>
				</dl>
				<div class="b_tel_bg">
					<a href="#" class="b_sh1">新浪微博</a> <a href="#" class="b_sh2">腾讯微博</a>
					<p>
						服务热线：<br /> <span>400-123-4567</span>
					</p>
				</div>
				<div class="b_er">
					<div class="b_er_c">
						<img src="images/er.gif" width="118" height="118" />
					</div>
					<img src="images/ss.png" />
				</div>
			</div>
			<div class="btmbg">
				<div class="btm">
					备案/许可证编号：蜀ICP备12009302号-1-www.dingguagua.com Copyright © 2015-2018
					商城网 All Rights Reserved. 复制必究 , Technical Support: Dgg Group <br />
					<img src="images/b_1.gif" width="98" height="33" /><img src="images/b_2.gif" width="98" height="33" /><img src="images/b_3.gif"
					 width="98" height="33" /><img src="images/b_4.gif" width="98" height="33" /><img src="images/b_5.gif" width="98"
					 height="33" /><img src="images/b_6.gif" width="98" height="33" />
				</div>
			</div>
			<!--End Footer End -->
		</div>
<<<<<<< HEAD
	</body>
	<script src="js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
=======
	<script src="js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
		
	
>>>>>>> refs/remotes/origin/master
	<script type="text/javascript">
		//页面加载时执行,展示所有地址
		jQuery(function() {
			showAddress();
		})

		//退出编辑时,隐藏盒子,并清除文本框里面的内容
		function giveUpEdit() {
			document.getElementById("addTheAddress2").style.display = 'none';
			clearText();
		}

		//点击添加地址调用
		function showAddTheAddress() {
			document.getElementById("addTheAddress2").style.display = 'block';
			document.getElementById("change").style.display = 'none';
			document.getElementById("save").style.display = 'block';
		}


		function showAddress() {
			//获取隐藏的input标签
			var username = document.getElementById("username").innerText;
			jQuery.getJSON(
				"ShowTheAddressServlet", {
					"username": username
				},
				function(data) {
					//遍历传回的数据并且创建对应的tr标签
					jQuery(data).each(function(index, ad) {
						var tr = "<tr><td align='center'>" + ad.consignee + "</td>" +
							"<td align='center' >" + ad.sex + "</td>" +
							"<td align='center' >" + ad.phone + "</td>" +
							"<td align='center' >" + ad.zip_code + "</td>" +
							"<td align='center'>" + ad.province + ad.city + ad.district + ad.address + "</td>" +
							"<td align='center'>" + ad.remark + "</td>" +
							"<td align='center' class='edit'><a style='display:none' class='is_default'>" + ad.is_default +
							"</a><input class='remove' type='button' value='删除' onclick='drop(this);'/><input class='update' type='button' value='编辑' onclick='getAddress(this);'/><input class='setDefault' type='button' value='设为默认' onclick='setTheDefaultAddress(this);'/></td>"
						jQuery("table tr:eq(0)").after(tr);
					});
					//执行完后调用展示默认地址的方法
					showdefault();
				})
				
				
		}


		//删除地址的方法
		//删除tr行,而不是删除tr行中所有td====================
		function drop(btn) {
			var tr = btn.parentNode.parentNode;
			var addresstable = document.getElementById("addresstable").children[0];
			var consignee = tr.getElementsByTagName("td")[0].innerText;
			var phone = tr.getElementsByTagName("td")[2].innerText;
			var arr = [consignee, phone];
			$.getJSON("RemoveTheAddressServlet", {
				consignee: arr[0],
				phone: arr[1]
			}, function(data) {
				if (data == 1) {
					addresstable.removeChild(tr);
					$("#addresstable tr").not(":first").remove();
				} else {
					alert('删除失败！')
				}
				showAddress();
			})
			var userChoose = confirm("确定删除吗?");
			if (userChoose) {
				var tr = btn.parentNode.parentNode;
				var addresstable = document.getElementById("addresstable").children[0];
				var consignee = tr.getElementsByTagName("td")[0].innerText;
				var phone = tr.getElementsByTagName("td")[2].innerText;
				var arr = [consignee, phone];
				jQuery.getJSON("RemoveTheAddressServlet", {
					consignee: arr[0],
					phone: arr[1]
				}, function(data) {
					if (data == 1) {
						addresstable.removeChild(tr);
					} else {
						alert('删除失败！')
					}
				})
			}
		}

		//展示默认地址
		function showdefault() {
			//获取所有的Tr标签
			var is_default = document.getElementsByClassName("is_default");
			//获取选中的tr标签
			var span = document.createElement("span");
			span.className = "defalt";
			span.innerHTML = "默认地址";
			for (var i = 0; i < is_default.length; i++) {
				console.log(is_default[i].innerText);
				if (parseInt(is_default[i].innerText) == 1) {
					is_default[i].parentNode.childNodes[3].style.display = 'none';
					is_default[i].parentNode.appendChild(span);
				} else {
					is_default[i].parentNode.parentNode.classList.add("checkedBox");
				}

			}
		}
		//设为默认地址
		function setTheDefaultAddress(btn) {
			var tr = btn.parentNode.parentNode;
			var consignee = tr.children[0].innerText;
			var phone = tr.children[2].innerText;
			jQuery.getJSON(
				"SetThedefaultAddressServlet", {
					"consignee": consignee,
					"phone": phone
				},
				function(data) {
					jQuery("#addresstable tr").not(":first").remove();
					showAddress();
					showdefault();
				})
		}
		//清除文本框中的内容
		function clearText() {
			var text = document.getElementsByClassName("add_ipt");
			for (var i = 0; i < text.length; i++) {
				text[i].value = "";
			}
			var select = document.getElementsByClassName("default");
			for (var i = 0; i < select.length; i++) {
				select[i].options[0].selected = true;
			}
		}
		//修改地址的方法
		function changeTheAddress() {
			document.getElementById("addTheAddress2").style.display = 'none';
			jQuery.getJSON("ChangeTheAddressServlet", {
				province: jQuery("#province").val(),
				city: jQuery("#city").val(),
				county: jQuery("#county").val(),
				consignee: jQuery("#consignee").val(),
				zip_code: jQuery("#zip_code").val(),
				address: jQuery("#address").val(),
				sex: jQuery("#sex").val(),
				phone: jQuery("#phone").val(),
				remark: jQuery("#remark").val()
			}, function(data) {
				$("#addresstable tr").not(":first").remove();
				showAddress();
			})
			clearText();
		}


		//添加地址,并通过json刷新
		function hidAddTheAddress() {
			document.getElementById("addTheAddress2").style.display = 'none';
			$.getJSON("AddTheAddressServlet", {
				province: jQuery("#province").val(),
				city: jQuery("#city").val(),
				county: jQuery("#county").val(),
				consignee: jQuery("#consignee").val(),
				zip_code: jQuery("#zip_code").val(),
				address: jQuery("#address").val(),
				sex: jQuery("#sex").val(),
				phone: jQuery("#phone").val(),
				remark: jQuery("#remark").val()
			}, function(data) {
				jQuery("#addresstable tr").not(":first").remove();
				showAddress();
			})
			clearText();
		}
		//点击编辑从数据库取值并在前端展示
		function getAddress(btn) {
			document.getElementById("addTheAddress2").style.display = 'block';
			document.getElementById("save").style.display = 'none';
			document.getElementById("change").style.display = 'block';
			var tr = btn.parentNode.parentNode;
			var consignee = tr.children[0].innerText;
			var phone = tr.children[2].innerText;
			jQuery.getJSON(
				"GetTheAddressServlet", {
					"consignee": consignee,
					"phone": phone
				},
				function(data) {
					//遍历传回的数据并且创建对应的tr标签
					jQuery(data).each(function(index, ad) {
						document.getElementById("province").value = ad.province;
						document.getElementById("consignee").value = ad.consignee;
						document.getElementById("zip_code").value = ad.zip_code;
						document.getElementById("sex").value = ad.sex;
						document.getElementById("phone").value = ad.phone;
						document.getElementById("address").value = ad.address;
						document.getElementById("remark").value = ad.remark;
						city();
						county();
					})
				})
		}

		//从数据库通过id取出市的名字，并展示	
		function city() {
			jQuery.getJSON(
				"CityShowServlet", {},
				function(data) {
					//遍历data数据并且创建对应的option
					jQuery(data).each(function(index, ob) {
						var cityID = ob.id;
						var name = ob.name;
						//创建option
						var option = "<option value='" + cityID + "'>" + name + "</option>";
						jQuery("#city").append(option);
					})
				}
			)
		}
		//从数据库通过id取出县的名字，并展示	
		function county() {
			jQuery.getJSON(
				"CountyShowServlet", {},
				function(data) {
					//遍历data数据并且创建对应的option
					jQuery(data).each(function(index, ob) {
						var countyId = ob.id;
						var name = ob.name;
						//创建option
						var option = "<option value='" + countyId + "'>" + name + "</option>";
						jQuery("#county").append(option);
					})
				}
			)
		}

		jQuery(function() {
			bind_pro();
			// totalConsume();
			//绑定change事件
			jQuery("#province").change(function() {
				//获取当前省份的ID
				var proId = jQuery("#province option:selected").val();
				//将之前的过时信息删除
				jQuery("#city").children().remove();
				//根据当前省份ID去获取对应城市的信息
				bind_city(proId);

			})
			jQuery("#city").change(function() {
				//获取当前省份的ID
				var proId = jQuery("#province option:selected").val();
				//获取当前城市的id
				var cityId = jQuery("#city option:selected").val();
				//删除之前的过时信息
				jQuery("#county").children().remove();
				//根据当前城市去获取对应县区的信息
				bind_county(cityId);
			})
		})
		//省三级联动
		function bind_pro() {
			jQuery.getJSON(
				"ProvinceServlet",
				null,
				function(data) {
					//遍历data数据并且创建对应的option
					jQuery(data).each(function(index, ob) {
						var proID = ob.id;
						var name = ob.name;
						//创建option
						var option = "<option value='" + proID + "'>" + name + "</option>";
						jQuery("#province").append(option);
					})
					//在所有的option前面添加一个默认选项
					jQuery("#province option:first").before("<option value='-1' selected='selected'>请选择省份</option>");
				}
			)
		}

		function bind_city(proId) {
			jQuery.getJSON(
				"CityServlet", {
					"proId": proId
				},
				function(data) {
					//遍历data数据并且创建对应的option
					jQuery(data).each(function(index, ob) {
						var cityID = ob.id;
						var name = ob.name;
						//创建option
						var option = "<option value='" + cityID + "'>" + name + "</option>";
						jQuery("#city").append(option);
					})
					//在所有的option前面添加一个默认选项
					jQuery("#city option:first").before("<option value='-1' selected='selected'>请选择城市</option>");
				}
			)
		}

		function bind_county(cityId) {
			jQuery.getJSON(
				"CountyServlet", {
					"cityId": cityId
				},
				function(data) {
					//遍历data数据并且创建对应的option
					jQuery(data).each(function(index, ob) {
						var countyId = ob.id;
						var name = ob.name;
						//创建option
						var option = "<option value='" + countyId + "'>" + name + "</option>";
						jQuery("#county").append(option);
					})
					//在所有的option前面添加一个默认选项
					jQuery("#county option:first").before("<option value='-1' selected='selected'>请选择区县</option>");
				}
			)
		}
	</script>

</html>
